import React, { Component } from 'react';
import "../../styles/home/MyEntry.css"

// 单独引入图片
// import img from "../../assets/img/01.webp"

//引入请求
import { IndexNav } from "../../api/home.js";

//在class组件中 任何一个方法内,都可以通过this获取到当前组件实例
class MyEntry extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }

    componentDidMount() {
        IndexNav().then((res) => {
            console.log(res.data.list);
            this.setState({ list: res.data.list })
        })
    }


    render() {
        return (
            <div className='homeentry'>
                <p className='text'>1分抵1元。请您点击此处查看《购物须知》</p>
                <div className='outlist'>
                    {//列表渲染(列表中每个列表项必须有一个唯一的key值)
                        this.state.list.map((item, index) => {
                            return (
                                <div className='list' key={index}>
                                    <img src={item.pic} alt="" />
                                    <p>{item.name}</p>
                                </div>
                            )
                        })
                    }
                    {//条件渲染(两种写法)
                        // this.state.list.length === 0 ? <div className='none'>请尝试刷新页面</div> : ""
                        this.state.list.length === 0 && <div className='none'>请尝试刷新页面</div>//利用逻辑短路
                        // 因为{}中不能写语句,所以判断只能用三目运算
                    }


                    {/* {//列表渲染夹杂条件渲染(结构上有点不好看,一般不用)
                        this.state.list.length !== 0 ?
                            this.state.list.map((item, index) => {
                                return <div className='list' key={index}>
                                    <img src={item.img} alt="" />
                                    <p>{item.name}</p>
                                </div>
                            }) : <div className='none'>请尝试刷新页面</div>
                    } */}
                </div>
            </div>
        );
    }
}

export default MyEntry;